<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <link rel="stylesheet" href="/home/zl/py3/web/reset.css" />
        <link rel="stylesheet" href="/home/zl/py3/web/admin.css" />
    </head>
        <style>
            body{
                padding: 0;
                margin: 0;
            }

            .wapper{
                width: 100%;
                height: 1500px;
                background: #f0f3f4;
            }

            /*box_left*/
            .box_l{
                width: 20%;
                height: 1500px;
                float: left;
                background: #39435c;
                color: #eee8d7;
            }

            .logo{
                height: 50px;
                line-height: 50px;
                background: #283744;
                text-align: center;
            }

            .phone{
                width: 80px;
                height: 80px;
                float: left;
                display: inline;
            }

            .user_info{
                width: auto;
                height: 80;
            }

            /*box right*/
            .box_r{
                height: 20px;
                padding: 15px;
                background: #ffffff;
            }

            .div1{
                width: 17%;
                height: 70px;
                background: #ffffff;
                display: inline-block;
                margin: 1%;
            }
            .div2{
                width: 17%;
                height: 70px;
                background: #ffffff;
                display: inline-block;
                margin: 1%;
            }
            .div3{
                width: 17%;
                height: 70px;
                background: #ffffff;
                display: inline-block;
                margin: 1%;
            }
            .div4{
                width: 17%;
                height: 70px;
                background: #ffffff;
                display: inline-block;
                margin: 1%;
            }
        </style>
    <body>
        <div class="wapper">
            <div class="box_l">
                <div class="logo">DIRECTOR</div>
                <div class="phone">
                    <img src="user_pic.jpg" width="80" class="phone" />
                </div>
                <div class="user_info">
                    Hello,Jane Online
                </div>
                <div>
                    <input type="text" placeholder="Search..." />
                </div>
                <div>
                    <ul>
                        <li>Dashboard</li>
                        <li>General</li>
                        <li>Basic Elements</li>
                        <li>Simple tables</li>
                    </ul>
                </div>
            </div>
            <div class="box_r">
                <img src="icon05.png" />
            </div>
            <div class="div1">
                3200 Total Tasks
            </div>
            <div class="div2">
                2200 Total Messages
            </div>
            <div class="div3">
                100320 Total Profit
            </div>
            <div class="div4">
                4567 Total Documents
            </div>
        </div>
    </body>
</html>
